<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鬼畜全明星</title>
</head>

<style>

    body {
        font-family: Verdana, sans-serif; /*字体*/
        font-size: 0.8em; /*文字大小*/
    }

    header, footer {
        color: white;
        background-color: firebrick;
        padding: 10px;
        border-radius: 4px;
    }

    section {
        color: white;
        border-radius: 4px;
        border: 1px solid burlywood;
        padding: 10px;
        margin-bottom: 15px;
        background-color: chocolate;
    }

    article {
        display: flex;
        flex-direction: row;
        color: black;
        margin: 1px;
        margin-bottom: 15px;
        padding: 10px;
        background-color: white;
        border-radius: 4px;
    }

    .img {
        margin-right: 10px;
    }

    nav ul li {
        margin-bottom: 8px;
        margin-top: 8px;
        display: inline;
        margin-right: 5px;
        padding: 4px;
        color: white;
        background-color: coral;
        border-radius: 4px;
    }
</style>

<body>

<header>
    <h1>鬼畜全明星</h1>
</header>

<nav>
    <ul>
        <li>大陆</li>
        <li>港台</li>
        <li>欧美</li>
    </ul>
</nav>

<section>
    <h2>大陆代表</h2>

    <article>

        <div class="img">
            <img src="http://i2.hdslb.com/bfs/archive/2df02ac718f7e5dae36b64276bca9312a86d2787.jpg"
                 alt="出错，无法打开图片"/>
        </div>

        <div>
            <h2>葛平</h2>
            <p>只听见下面有一个 我来 这时候我一看小朋友们人群当中钻出了一个光头</p>
            <p>看蓝猫学蓝猫我有知识我自豪</p>
        </div>

    </article>

    <article>
        <div class="img">
            <img src="http://01.imgmini.eastday.com/mobile/20180630/20180630022529_48d0cef2375c26320014def8726910f3_1.png"
                 alt="出错，无法打开图片"/>
        </div>

        <div>
            <h2>李云龙</h2>
            <p>想办法干他一炮</p>
            <p>二营长，你他娘的意大利炮呢</p>
        </div>

    </article>

</section>

<section>
    <h2>欧美代表</h2>

    <article>

        <div class="img">
            <img src="http://www.qqzhi.com/uploadpic/2015-01-24/164443583.jpg"
                 alt="出错，无法打开图片"/>
        </div>

        <div class="content">
            <h2>元首</h2>
            <p>我到河北省来</p>
            <p>渣渣</p>
        </div>

    </article>

    <article>
        <div class="img">
            <img src="http://ztd00.photos.bdimg.com/ztd/w=350;q=70/sign=8a967f9bdb58ccbf1bbcb33f29e3cd03/7af40ad162d9f2d36e64f2c6a3ec8a136327cca6.jpg"
                 alt="出错，无法打开图片"/>
        </div>

        <div class="content">
            <h2>金坷垃合唱团</h2>
            <p>肥料掺了金坷垃能吸收两米下的氮磷钾</p>
            <p>美国 生弟压哥</p>
        </div>

    </article>

</section>

<section>
    <h2>港台代表</h2>

    <article>

        <div class="img">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533897937468&di=e1ed13b51aa2c9fa6cc60ab9a6c5df2d&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2Fc27c324d5460cecad53a2cacfde49de17bb83acf.jpg"
                 alt="出错，无法打开图片"/>
        </div>

        <div class="content">
            <h2>刘醒 梁非凡</h2>
            <p>我要炒你啊</p>
            <p>吔屎啦，梁非凡</p>
        </div>

    </article>

    <article>
        <div class="img">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533898164877&di=e1dad2c8b998bb11fefd7b47c0cee1cc&imgtype=0&src=http%3A%2F%2Fimg.naseng.com%2Fcontentimage%2F20170506%2F149407067592231.jpg"
                 alt="出错，无法打开图片"/>
        </div>

        <div class="content">
            <h2>乌蝇哥</h2>
            <p>食屎拉你</p>
            <p>说声多谢乌蝇哥</p>
        </div>

    </article>

</section>

<footer>
    <p>© 2018 Kichiku All Star. All rights reserved.</p>
</footer>

</body>

</html>